<template>
  <div>
<!--    <div style="position: sticky;top: 0;z-index: 99">-->
<!--      <Myheader></Myheader>-->
<!--    </div>-->
    <div style="margin-bottom: 20px;height: 1000px;">
      <div
        style="text-align: left;display: flex;align-items: center;margin: 20px;"
      >
        <div class="l-title" style="font-size:1.65rem;">青鸟归巢</div>
        <div style="padding-left: 20px;">EVENTS</div>
      </div>
      <div
        style="padding: 20px;"
      >
        <div class="look-container" v-for="(item,index) in list" :key="index" >
          <div class="look-box">
            <a :href="item.lianjie" target="_blank" style="color:black">
              <img
              class="l-img"
              :src="`http://localhost:8087/dev-api${item.tupian}`"
              alt=""
            />

            <div>{{ item.biaoti }}</div>
          </a>
          </div>


        </div>
      </div>
    </div>
<!--    <div>-->
<!--      <MyBottom></MyBottom>-->
<!--    </div>-->
  </div>
</template>

<script>
import Myheader from "./header.vue";
import MyBottom from "./bottom.vue";
import { getKanDianList } from "@/api";
export default {
  name: "bird",
  components: { MyBottom, Myheader },
  data() {
    return {
      list: []
    };
  },
  mounted() {
    getKanDianList()
      .then(res => {
        console.log("res:是是是 ", res);
        this.list=res.data
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.l-title {
  position: relative;
  padding-left: 10px;
}

.look-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.look-box {
  cursor: pointer;
  line-height: 1.7;
  margin-bottom: 12px;
  color: #ffffff;
}

.l-img {
  width: 265px;
}
</style>
